<template>
  <div class="loginDiaLog" id="loginDiaLog">
    <!-- <div @click="dialogFormVisibleLogin = true">登录</div> -->
    <Registered
      :isShowLoginDiaLog="isShowLoginDiaLog"
      @goLoginInterface="getRegistered"
    />  
    <ForgotPassword
      :isShowForgotDiaLog="isShowForgotDiaLog"
      @fromForgotPassWord="fromForgotPassWord"
      @fromForgotGoRegistered="fromForgotGoRegistered"
    ></ForgotPassword>
    <el-dialog title="" :visible.sync="dialogFormVisibleLogin" class="loginDio">
      <el-tabs :stretch="true" v-model="activeName">
        <el-tab-pane label="普通登录" name="first" class="">
          <el-form :model="userForm" :rules="rules">
            <!-- <i class="el-icon-user"></i> -->
            <el-form-item prop="userName">
              <el-input
                v-model="userForm.userName"
                autocomplete="off"
                placeholder="请输入账号"
                class="inputStyle"
                clearable
              ></el-input>
            </el-form-item>
            <el-form-item prop="passWord">
              <el-input
                v-model="userForm.userPassWrod"
                autocomplete="off"
                placeholder="请输入密码"
                class="inputStyle"
                show-password
              ></el-input>
            </el-form-item>
          </el-form>

          <el-button type="success" class="loginBtn" @click="submitFrom"
            >登录</el-button
          >
          <div class="registered">
            <span class="registeredForget" @click="openRegistered"
              >立即注册!</span
            >
            <span class="registeredForget" @click="forgetPassWord"
              >忘记密码?</span
            >
          </div>
        </el-tab-pane>
        <el-tab-pane label="手机登录" name="second">
          <el-form :model="userForm" class="iponeLogin" :rules="rules">
            <!-- <i class="el-icon-user"></i> -->
            <el-form-item prop="iponeNum">
              <el-input
                v-model="userForm.iponeNum"
                autocomplete="off"
                placeholder="请输入手机号"
                class="inputStyle"
                clearable
              ></el-input>
            </el-form-item>
            <el-form-item prop="verificationCode">
              <el-input
                v-model="userForm.verificationCode"
                autocomplete="off"
                placeholder="请输入验证码"
                class="inputStyle"
              >
              </el-input>
            </el-form-item>
          </el-form>
          <el-button
            type="success"
            @click.prevent="getCode"
            class="verificationCode"
            ref="verificationCode"
            :disabled="disabled"
            >{{ getCodeVlue }}</el-button>
          <el-button type="success" class="loginBtn" @click="phoneLogin"
            >登录</el-button>
          <div class="registered">
            <span class="registeredForget" @click="openRegistered"
              >立即注册!</span>
            <span class="registeredForget" @click="forgetPassWord"
              >忘记密码?</span
            >
          </div>
        </el-tab-pane>
      </el-tabs>
    </el-dialog>
  </div>
</template>
<script>
// 账号密码登录 接口
import {
  getAccountLogin,
  getLoginPhoneCode,
  getPhoneLogin,

} from "../api/userCenter-api";
import Registered from "./Registered.vue";
import ForgotPassword from "./ForgotPassword.vue";
export default {
  name: "LoginDiaLog",
  data() {
    return {
      dialogFormVisibleLogin: false,
      isShowLoginDiaLog: {},
      isShowForgotDiaLog: false,
      userForm: {
        userName: "",
        userPassWrod: "",
        iponeNum: "",
        verificationCode: '',
      },
      formLabelWidth: "120px",
      activeName: "first",
      getCodeVlue: "获取验证码",
      num: 60,
      disabled: false,
      rules: {
        //   正则
        userName: [
          { required: true, message: "请输入用户名", trigger: "blur" },
        ],
        passWrod: [{ required: true, message: "请输入密码", trigger: "blur" }],
        iponeNum: [
          { required: true, message: "请输入手机号", trigger: "blur" },
        ],
        verificationCode: [
          { required: true, message: "请输入验证码", trigger: "blur" },
        ],
      },
    };
  },
  components: {
    Registered,
    ForgotPassword,
  },
  methods: {
    submitFrom() {
    // 登录接口 
      getAccountLogin(this.userForm.userName, this.userForm.userPassWrod).then(
        (res) => {
          if (res.code === 0) {
            this.$message({
              showClose: true,
              message: "登录成功",
              type: "success",
            });
            this.$store.commit("modifyUserName", {
              userName: res.userInfo.nickname,
            });
            this.$store.commit('modifyUserInfo',{userInfo:res.userInfo})
          } else {
            this.$message({
              showClose: true,
              message: `${res.msg}`,
              type: "error",
            });
          }
          
        }
      );
      setTimeout(() => {
        this.dialogFormVisibleLogin = false;
      }, 500);
    },
    getCode() {
      // 手机登录验证码接口
      if(this.userForm.iponeNum !=''){
 getLoginPhoneCode(this.userForm.iponeNum ).then((res) => {
        if(res.code!=0){
          this.$message({
              showClose: true,
              message: `${res.msg}`,
              type: "error",
            });
        }
                   let a1 = setInterval(() => {
        this.num--;
        this.disabled = true;
        this.getCodeVlue = `${this.num}秒后重试`;
      }, 1000);
      setTimeout(() => {
        clearInterval(a1);
        this.getCodeVlue = `获取验证码`;
        this.disabled = false;
        this.num=60
      }, 60000);
      }); 
      }else{

        this.$message({
              showClose: true,
              message: `请输入手机号`,
              type: "error",
            });
      }
   
    },
    openRegistered() {
      this.dialogFormVisibleLogin = false;

      this.isShowLoginDiaLog = { isShow: true, num: this.num++ };
    },
    forgetPassWord() {
      // 登录框关闭
      this.dialogFormVisibleLogin = false;
      // 使传到忘记密码组件的值发生改变
      this.isShowForgotDiaLog = !this.isShowForgotDiaLog;
    },
    getRegistered() {
      this.dialogFormVisibleLogin = true;
    },
    fromForgotPassWord() {
      this.dialogFormVisibleLogin = true;
    },
    fromForgotGoRegistered() {
      this.isShowLoginDiaLog = { isShow: true, num: this.num++ };
    },
    phoneLogin() {
      if(this.userForm.iponeNum ===''||this.userForm.verificationCode===''){
          this.$message({
              showClose: true,
              message: `请输入手机号/验证码`,
              type: "error",
            });
      }else{
      getPhoneLogin(this.userForm.iponeNum,this.userForm.verificationCode).then((res) => {
        if(res.code===0){
            this.$message({
              showClose: true,
              message: res.msg,
              type: "success",
            });
            this.dialogFormVisibleLogin=false

        }else{
           this.$message({
              showClose: true,
              message: res.msg,
              type: "error",
            });
        }
      });
      }

    },
  },
  // indexHead传回来的值 控制login对话框的显示与隐藏
  props:{
    toLogin:{
      type:Number,
    }
  },
  watch: {
    toLogin(){
      this.dialogFormVisibleLogin=true
    }
  }
};
</script>
<style scoped lang="less">
.el-dialog,
.loginDio {
  width: 800px;
  margin: auto;
}
.inputStyle {
  margin: 10px 0;
}
.registered {
  display: flex;
  justify-content: space-between;
  margin-top: 15px;
}
.loginText {
  text-align: center;
}
.el-tabs__item {
  font-size: 16px;
}

.iponeLogin {
  position: relative;
}
.verificationCode {
  position: absolute;
  top: 94px;
  right: 0;
  //   width: 100px;
}
.loginBtn {
  width: 100%;
  padding-left: 0;
}
#loginDiaLog {
  .el-tabs__item {
    font-size: 50px;

    &:hover {
      color: #00cf8c;
    }
  }
  /deep/ .el-tabs__item.is-active {
    color: #00cf8c;
  }

  .el-button + .el-button {
    margin-left: 0;
  }
  /deep/.el-tabs__item:hover {
    color: #00cf8c;
    cursor: pointer;
  }
  /deep/.el-tabs__active-bar {
    background: #00cf8c;
  }
}
/deep/ .el-dialog__header {
  padding: 0;
}
.registeredForget {
  cursor: pointer;
  &:hover {
    color: #00cf8c;
  }
}
</style>